
<ion-header>
  <ion-navbar>
    <ion-title>
      Ranges
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="outer-content">
  <ion-list>
    <ion-list-header>
      Adjust Display
    </ion-list-header>
    <ion-item>
      <ion-range [(ngModel)]="brightness">
        <ion-icon range-left small name="sunny"></ion-icon>
        <ion-icon range-right name="sunny"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range min="-200" max="200" pin="true" [(ngModel)]="contrast" color="secondary">
        <ion-icon range-left small name="contrast"></ion-icon>
        <ion-icon range-right name="contrast"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" color="dark">
        <ion-icon range-left small name="brush"></ion-icon>
        <ion-icon range-right name="brush"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" color="danger">
        <ion-icon range-left small color="danger" name="thermometer"></ion-icon>
        <ion-icon range-right color="danger" name="thermometer"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header>
      Adjust Text
    </ion-list-header>
    <ion-item>
      <ion-range min="-100" step="10" snaps="true" [(ngModel)]="text">
        <ion-label range-left class="small-text">A</ion-label>
        <ion-label range-right>A</ion-label>
      </ion-range>
    </ion-item>
  </ion-list>
</ion-content>

<style>
  ion-list + ion-list {
    margin-top: 0;
  }

  .small-text {
    font-size: 10px;
  }
</style>
